<script setup lang="ts">
  import useOaEmpListService from '@/services/pages/base-info/useOaEmpListService'
  import FormModal from './form-modal.vue'
  import { ref } from 'vue'
  import { RefreshRight, Search } from '@element-plus/icons-vue'
  import { ElMessageBox } from 'element-plus'
  import useOaEmpDeleteService from '@/services/pages/base-info/useOaEmpDeleteService'
  import { HMessage, HMessageBox } from '@/components/common/message'
  import useOaEmpFormService from '@/services/pages/base-info/useOaEmpFormService'

  const { form, formSave, resetForm } = useOaEmpFormService()
  const { oaEmpDelete } = useOaEmpDeleteService()
  const {
    oaEmpList,
    getOaEmpListParam,
    getOaEmpListLoading,
    getOaEmpList,
    resetGetOaEmpListParam,
  } = useOaEmpListService()

  defineOptions({
    name: 'OaPostingList',
  })

  const formModalVisible = ref(false)
  const currentOperateOaEmp = ref<BaseInfoAPIResponse.OaEmpListItem>({
    id: '',
    defaultChoose: 0,
    name: '',
    jobNumber: '',
  })

  const getList = () => {
    getOaEmpList()
  }

  const onResetClick = () => {
    resetGetOaEmpListParam()
    getList()
  }

  const handleDeleteClick = (id: string) => {
    ElMessageBox({
      title: '提示',
      message: '确定删除该账号?',
      type: 'warning',
      autofocus: false,
      showCancelButton: true,
      async beforeClose(action, instance, done) {
        if (action === 'confirm') {
          try {
            instance.confirmButtonLoading = true
            instance.cancelButtonLoading = true
            const res = await oaEmpDelete(id)
            instance.confirmButtonLoading = false
            instance.cancelButtonLoading = false
            if (res) {
              if (res.code === 20000) {
                HMessage.success('操作成功')
                getList()
                done()
                return
              }

              HMessageBox.error(res.message)
              return
            }

            HMessageBox.error('账号删除失败，请稍后重试')
            return
          } catch (e) {
            instance.confirmButtonLoading = false
            instance.cancelButtonLoading = false
          }
        }

        done()
      },
    })
  }

  const handleSetDefaultClick = (oaEmp: BaseInfoAPIResponse.OaEmpListItem) => {
    ElMessageBox({
      title: '提示',
      message: '确定将该账号设置为默认账号?',
      type: 'warning',
      autofocus: false,
      showCancelButton: true,
      async beforeClose(action, instance, done) {
        if (action === 'confirm') {
          try {
            instance.confirmButtonLoading = true
            instance.cancelButtonLoading = true
            form.value = {
              id: oaEmp.id,
              defaultChoose: 1,
              name: oaEmp.name,
              jobNumber: oaEmp.jobNumber,
            }
            const res = await formSave()
            instance.confirmButtonLoading = false
            instance.cancelButtonLoading = false
            if (res) {
              if (res.code === 20000) {
                HMessage.success('操作成功')
                getList()
                resetForm()
                done()
                return
              }

              HMessageBox.error(res.message)
              return
            }

            HMessageBox.error('设置失败，请稍后重试')
            return
          } catch (e) {
            instance.confirmButtonLoading = false
            instance.cancelButtonLoading = false
          }
        }

        done()
      },
    })
  }

  const handleEditClick = (oaEmp: BaseInfoAPIResponse.OaEmpListItem) => {
    currentOperateOaEmp.value = oaEmp
    formModalVisible.value = true
  }

  defineExpose({
    getList,
  })
</script>

<template>
  <div v-loading="getOaEmpListLoading" class="oa-posting-component">
    <div class="header">
      <div class="btn-group">
        <h-plain-button @click="formModalVisible = true">添加账号</h-plain-button>
      </div>
      <div class="search">
        <el-input
          v-model.trim="getOaEmpListParam.jobNumber"
          placeholder="请输入工号"
          clearable
          style="width: 120px"
          @keyup.enter="getList"
          @clear="getList"
        />
        <el-input
          v-model.trim="getOaEmpListParam.name"
          placeholder="请输入员工名称"
          clearable
          style="width: 120px"
          @keyup.enter="getList"
          @clear="getList"
        />
        <h-button type="primary" @click="getList">
          <el-icon>
            <Search />
          </el-icon>
          搜索
        </h-button>
        <h-button @click="onResetClick">
          <el-icon>
            <RefreshRight />
          </el-icon>
          搜索
        </h-button>
      </div>
    </div>
    <div class="table">
      <el-table :data="oaEmpList" :border="true" :stripe="true">
        <!-- 序号 -->
        <el-table-column type="index" width="50" :align="'center'" label="序号" />

        <!-- OA账号 -->
        <el-table-column min-width="140" prop="jobNumber" label="OA账号" />

        <!-- 员工名称 -->
        <el-table-column width="160" prop="name" label="员工名称" />

        <!-- 是否为默认 -->
        <el-table-column width="160" label="是否为默认">
          <template #default="{ row }">
            {{ row.defaultChoose === 1 ? '是' : '否' }}
          </template>
        </el-table-column>

        <!-- 操作 -->
        <el-table-column width="180" label="操作">
          <template #default="{ row }">
            <h-space>
              <h-link @click="handleEditClick(row)">修改</h-link>
              <h-link v-if="row.defaultChoose === 1" disabled>删除</h-link>
              <h-link v-else type="error" @click="handleDeleteClick(row.id)">删除</h-link>
              <h-link v-if="row.defaultChoose === 1" disabled>设置为默认</h-link>
              <h-link v-else @click="handleSetDefaultClick(row)">设置为默认</h-link>
            </h-space>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <form-modal v-model="formModalVisible" :oa-emp="currentOperateOaEmp" @update="getList" />
  </div>
</template>

<style scoped lang="scss">
  .oa-posting-component {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    row-gap: 4px;

    .header {
      display: flex;
      justify-content: space-between;

      .search {
        display: flex;
        column-gap: 8px;
      }
    }

    .table {
      max-height: calc(100% - 32px);
    }
  }
</style>
